<template>
    <div style="padding: 20px;">
        <div style="margin-bottom: 20px;display:flex;align-items: center;">
          <img :src="$store.state.user.avatar" alt="" style="width: 100px;height:100px;border-radius: 50%;margin-right:40px">
            <div style="flex:1">
                <div style="margin-bottom:20px;font-size:14px" class="huiyuan">
               当前积分 
               <span :style="{color:cur&&cur.color}">{{ $store.state.user.jifen }}  {{ cur&&cur.name }}</span>
                距离下一等级 
                <span :style="{color:cur&&cur.color}"  v-if="percentage!=100">{{ getNext.name }}</span> 还差
                 <span :style="{color:cur&&cur.color}"> {{ (getNext.jifen-$store.state.user.jifen)>0?getNext.jifen-$store.state.user.jifen:0 }}</span> 积分
            </div>
            <el-progress :percentage="percentage"  style="width: 100%;"></el-progress>
            </div>
        </div>
        <el-table
      :data="list"
      > 
       <el-table-column
        prop="date"
        label="排名"
        width="180">
        <template slot-scope="{$index}">
            {{ $index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="性别"
        width="180">
        <template slot-scope="{row}">
            {{ row.sex==1?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="jifen"
        label="学分"
        width="180">
      </el-table-column>
    
    </el-table>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
               list:[],
               jfList:[
               
               ]
            }
        },
        computed:{
            cur(){
                let index=  this.jfList.findIndex((v,i)=>this.$store.state.user.jifen>=v.jifen&&this.jfList[i+1]&&this.$store.state.user.jifen<this.jfList[i+1].jifen)
                if(index==-1){
                return  this.jfList[this.jfList.length-1]
            }else{

                return this.jfList[index]
            }
            },
            percentage(){
                let i=(((this.$store.state.user&&this.$store.state.user.jifen)/(this.getNext&&this.getNext.jifen))*100).toFixed(0)
                return i<=100?i:100
            },
            getNext(){
              let index=  this.jfList.findIndex((v,i)=>this.$store.state.user.jifen>=v.jifen&&this.jfList[i+1]&&this.$store.state.user.jifen<this.jfList[i+1].jifen)
            console.log(index,'index',this.jfList);
            if(index==-1){
                return this.jfList[this.jfList.length-1]
            }else{

                return this.jfList[index+1]
            }
            }
        },
        mounted () {
            api.gethuiyuan({page:1,size:99}).then(res=>{
this.jfList=res.data.list
            })
            this.getList();
        },
        methods: {
            getList(){
                api.userlist().then(res=>{
                    this.list=res.data.list
                    console.log(res);
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
 v-::deep .aa .el-tabs__item{
    font-size:22px !important;
}
.huiyuan{
    span{
        // color: orange;
        font-size: 16px;
        font-weight: bold;
    }
}
.list{
    .item{
        
        padding: 20px ;
        margin-top: 20px;
        border: 1px solid #ddd;
        .bottom{
            padding: 10px 0;
        }
        .product{
            margin-top: 10px;
            display: flex;
            .left{
                img{
                    margin-right: 20px;
                    width: 100px;
                    height: 100px;
                }
            }
        }
    }
}
.shanchu{
      text-decoration: line-through;
}
</style>